

<template>
	<div>
		<nav>
            <a class="nav-zuo" href="">
                <i class="fa fa-angle-left"></i>
            </a>
             <a class="input" href="#/seek">
                <i class="fa fa-search"></i>
            </a>
        </nav>
		<div class="sortlist">
			<div class="left">
				<ul>
					<li @click="fenlei('新品')" class="active">推荐商品</li>
					<li @click="fenlei(list)" v-for="list in lists" v-if="list != '新品'"> {{ list }} </li>
				</ul>
			</div>
			<div class="right">
                <img src="//img06.fn-mart.com/pic/80cc133c998927bb3515/B26zzz5TDnLgklUd3T/5xoGoR_yc9Wip9/CsmRsVoAHPuAZVm6AACulydArlw261_org_q75.jpg" alt="">
				<div v-for="data in datas">
					<a :href="`#/xiang/${data._id}`">
					<img :src="`http://localhost:2222/images/photos/${data.productImage}`" alt="">
					<p> {{ data.name }} </p>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data:function(){
			return {
				datas:[],
				lists:[],
				condition:'新品',
				img:'../../../node/public/images/photo-1510134696431.jpg'
			}
		},
		components:{
			
		},
		mounted:function(){
			var that = this;
            axios.get('los/shop').then(function(data){
                console.log(data.data.message);
                that.datas = data.data.message;
            }).catch(function(err){
                console.log(err);
            })
			axios.get('/los/tags').then(function(datas){
				console.log('datas22222222')
				console.log(datas.data.message)
				that.lists = datas.data.message;
			}).catch(function(err){
				console.log(err)
			})
			
		},
		methods:{
			fenlei:function(item){
				// 点击分类增加类名
			  	$('ul').children().click(function(){
			  		$(this).addClass('active').siblings().removeClass('active')
			  	})
				// 点击分类发送请求
				//console.log(item)
				var that = this;
				that.datas = [];
				that.condition = item
				axios.post('/los/goods',{condition:that.condition}).then(function(datas){
					console.log('datas3333333')
					console.log(datas.data.message)
					that.datas = datas.data.message;
				}).catch(function(err){
					console.log(err)
				})
			}
		}
	}
	
	
</script>

<style scoped>
	
	.sortlist{
		overflow: hidden;
        margin-top: 45px;
	}
	.left{
		float: left;
		width: 25%;
        height: 100vh;
		text-align: center;
		border-right: 1px solid #E0E0E0;
	}	
	.left ul li{
		line-height: 45px;
		color: #666;
		cursor: pointer;
		transition: all .2s; 
        list-style: none;
        box-shadow: 0 1px 0 1px #FFE4E1;
        font-size: 14px;
	}
	.left ul li.active{
		color: #cc0000;
		position: relative;
		font-size: 16px;
	}
	.right{
		overflow: hidden;
        background: rgba( 	255, 228, 225, 1);
        height: 100vh;
	}
	.right > div{
		width: 40%;
		float: left;
        /*border: 1px solid #000;*/
        margin: 10px 14px;
        background: #fff;
	}
    .right > img{
		width: 90%;
		display: block;
		margin: 0px auto 20px;
	}
	.right > div  img{
		width: 50px;
		height: 50px;
        display: block;
		margin: 20px auto;
	}
	.right p{
		text-align: center;
		font-size: 13px;
        margin-bottom: 15px;
		color: #999;
	}
    nav{
        padding: 0 15px;
        text-align: center;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 666;
        /*overflow: hidden;*/
        line-height: 45px;
        font-size: 16px;
        color: #666;
        border-bottom: 1px solid #ccc;
        background:#FA8072;
    }
    nav > .input  i{
        position: absolute;
        left: 10px;
        top: 5px;
        font-size: 16px;
        color: #666;
    }
    nav > .input{
        display: inline-block;
     width: 80%;   
     height: 28px;
     background: #fff;
     font-size: 14px;
     padding-left: 25px;
     border-radius: 3px;
     border: 1px solid #ccc;
     position: relative;
     top: 8px;
    }
    nav > a{
        font-size: 30px;
        color: #666;
    }
    .nav-zuo{
      float: left;
      margin-top: -2px;
    }
	
</style>




















